<!DOCTYPE html>
<html>
<head>
	<title>TheyTube - Watch free videos online</title>
	<link rel="stylesheet" href="css/spectre.min.css">
	<link rel="stylesheet" href="css/spectre-icons.min.css">
	<meta name="theme-color" content="#ddd">
	<script src="js/vue.js"></script>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
	<script type="text/javascript">
    window.serverAddr='101.200.54.63:9999'
    function getVid() {
      var i=location.href.indexOf("vid=")
      var vid=location.href.substring(i+4, i+36)
      return vid
    }
    function showInfo(str) {
      window.modalInfo.Info=str
      document.getElementById("modal-info").className='modal active'
    }
    function getVideoData() {
      var obj=new Object()
      obj.State="getVideo"
      obj.Info=getVid()
      var ws=new WebSocket("ws://"+window.serverAddr+"/wsGetVideo")
      ws.onopen=function(evt) {
        ws.send(JSON.stringify(obj))
      }
      ws.onmessage=function (evt) {
        console.log('on msg : '+evt.data)
        var gobj=JSON.parse(evt.data)
        if (gobj.State=="OK") {
          var mc=window.mainContainer
          mc.Title=gobj.Title
          mc.Introduction=gobj.Introduction
          mc.Owner=gobj.Owner
          mc.Cover=gobj.Cover
          mc.Count=gobj.Count
          mc.Clips=gobj.Clips
          var tabs=document.getElementsByClassName("tab-item")
          tabs[0].className="tab-item active"
          mc.CurClip=mc.Clips[0]
          var firstLink=document.getElementById("linksPanel").children[0].children[0]
          firstLink.disabled='disabled'
        }else if (gobj.State=="ERR") {
          showInfo(gobj.Info)
        }
        ws.close()
      }
      ws.onclose=function(evt) {
        console.log('get video on close')
      }
      ws.onerror=function(evt) {
        showInfo(evt.data)
      }
    }
	</script>
  <style type="text/css">
    a{
      text-decoration: none;
      color: #000;
      cursor: pointer;
    }
  </style>
</head>
<body style="padding: 0px;margin: 0px;">
<div id="main-container">

<div style="display: flex;flex-direction: column;align-items: center;box-shadow: 2px 2px 2px #ddd;">
  <div style="display: flex;width: 100%;align-items: center;">
    <span style="padding: 5px;color: #000;flex-grow: 1;"><center><big><b>{{Title}}</b></big></center></span>
    <a target="_blank" href="/index.html" style="flex-grow: 0;"><small style="margin-right: 10px;">TheyTube </small><i class="icon icon-apps" style="margin-right: 10px;color: #000;" onclick="window.open('/index.html')"></i></a>
  </div>
  <ul class="tab tab-block" style="margin: 0px;" id="tabblock">
      <div v-for="(clip,cindex) in Clips">
      	<li class="tab-item" v-on:click="switchTab(cindex)"><a>{{clip.Title}}</a></li>
      </div>
  </ul>
</div>
<div align="center">
<div id="content-div" style="max-width: 900px;width: 100%;overflow: hidden;" align="left">
  <video class="video-responsive" :src="CurClip.Links[0]" controls autoplay id="mainVideoPlayer"></video>
  <br>
  <div style="margin-left: 10px;">作者 : <a v-on:click="jmpOwner()">{{Owner}}</a></div>
  <div class="divider" data-content="简介"></div>
  <div style="margin: 10px;color: #000;">{{Introduction}}</div><br><br>
  <div class="divider" data-content="备用链接" ></div>
  <div id="linksPanel">
    <div v-for="(link,lindex) in CurClip.Links"><button class="btn" v-on:click="changeLink(link,lindex)">{{link}}</button> <br><br></div>
  </div>
</div>
</div>
</div>

<div class="modal" id="modal-info">
  <div class="modal-overlay"></div>
  <div class="modal-container">
    <div class="modal-header">
      <button class="btn btn-clear float-right" onclick="document.getElementById('modal-info').className='modal'"></button>
      <div class="modal-title"><b>提示</b></div>
    </div>
    <div class="modal-body">
      <div class="content">
        {{Info}}
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
	window.mainContainer=new Vue({
		el:"#main-container",
		data:{
      Title:'Loading',
      Introduction:'',
      Vid:'',
      Owner:'',
      Cover:'',
      Count:0,
      Clips:[
        {Title:'loading',Links:['']}
      ],
      switchTab:function(index) {
        var tabs=document.getElementById("tabblock").children
        for (var i=0;i<tabs.length;i++) {
          if (i==index) {
            tabs[i].children[0].className="tab-item active"
          }else {
            tabs[i].children[0].className="tab-item"
          }
        }
        window.mainContainer.CurClip=window.mainContainer.Clips[index]
      },
      changeLink:function(link,cindex) {
        var links=document.getElementById("linksPanel").children
        for(var i=0;i<links.length;i++){
          if (i==cindex) {
            links[i].children[0].disabled='disabled'
          }else{
            links[i].children[0].disabled=''
          }
        }
        document.getElementById("mainVideoPlayer").src=link
      },
      jmpOwner:function() {
        location.href="/user.html?email="+encodeURIComponent(window.mainContainer.Owner)
      },
      CurClip:{Title:'loading',Links:['link loading']}
		}
	})
  window.modalInfo=new Vue({
    el:"#modal-info",
    data:{
      Info:''
    }
  })
  setTimeout("getVideoData()", 200)
</script>
</body>
</html>